<template>
     <div class="editClass">
        <el-card>
            <el-button type="info" size="small" icon="el-icon-arrow-left"
                @click="backToPrev">
                返回</el-button>
            <el-form size="small" class="editForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">选择等级</span>
                            </span>
                            <div class="choose">
                                <el-select v-model="classLevel"
                                    placeholder="请选择分类等级" @change="choosePid">
                                    <el-option label="一级分类"
                                        value="1">一级分类</el-option>
                                    <el-option label="二级分类"
                                        value="2">二级分类</el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">名称</span>
                            </span>
                            <el-input v-model="editForm.drugTypeName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">排序</span>
                            </span>
                            <el-input v-model="editForm.sort"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item v-if="classLevel == 2">
                            <span slot="label">
                                <span class="labelText">选择一级分类</span>
                            </span>
                            <div class="choose">
                                <el-select
                                    v-model="editForm.drugTypePid"
                                    placeholder="请选择一级分类">
                                    <el-option v-for="item in drugPaList" :label="item.drugTypeName" :value="item.id" :key="item.id"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">备注</span>
                            </span>
                            <el-input v-model="editForm.remark"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">显示</span>
                            </span>
                            <el-tooltip content="是否显示" placement="top">
                                <el-switch v-model="editForm.show" active-value="0"
                                    inactive-value="1">
                                </el-switch>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item class="subBtn">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>

        </el-card>

    </div>
</template>
  
<script>
import dayjs from 'dayjs'
export default {
    name: '',
    data() {
        return {
            classLevel:'',
            editForm: {
                "createTime": '',
                "drugTypeName": "string",
                "drugTypePid": 0,
                "id": 0,
                "isDeleted": 0,
                "remark": "string",
                "show": 0,
                "sort": 0,
                "updateTime": ''
            },
            drugPaList: []
        }
    },
    components: {

    },
    mounted(){
        this.editForm={...this.$route.query};
         console.log(this.editForm);
        // this.editForm.drugTypePid = this.$route.query.id;
        if(this.editForm.drugTypePid!=0){
            this.classLevel=2;
        }else{
            this.classLevel=1;
        }
    },
    methods: {
        backToPrev() {
            this.$router.push('/medicine/medClassify')
        },
        choosePid() {
            if (this.classLevel == 1) {
                this.editForm.drugTypePid = 0;
            }
            if (this.classLevel == 2) {
                this.getMedClass()
            }
        },
        cancel(){
            this.editForm={...this.$route.query};
            // this.editForm.drugTypePid = this.$route.query.id;
        },
        async getMedClass() {
            let res = await this.$api.medicine.getMedClassList({ currentPage:1, pageSize:100 })
            //列表
            if (res.data.code === 200) {
                console.log(res.data.data);
                let arr = res.data.data;
                let newArr = arr.filter((item, index) => {
                    return item.drugTypePid == 0;
                });
                this.drugPaList=newArr
                console.log(this.drugPaList);
            } else {
                console.log('请求失败');
                this.tableData = []
            }
        },
       async onSubmit() {
            this.editForm.createTime = new Date(dayjs().format("YYYY-MM-DD HH:mm:ss")).toISOString();
            console.log(this.editForm.createTime);
            let res = await this.$api.medicine.editMedicine(this.editForm)
            console.log(res);
            if (res.data.code === 200) {
                //跳转到列表页面
                this.$router.push('/medicine/medClassify')
                //提示
                this.$message({
                    message: '恭喜你，修改分类成功',
                    type: 'success'
                });
            } else {
                //错误信息提示
                this.$message.error('出现错误，修改分类失败');
            }
        }
    }
}
</script>

<style scoped>
.editClass {
    margin: 20px 5px 0;
}

.labelText {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

hr {
    height: 0px;
    border: 1px solid #6c7b8b;
}

.subBtn {
    text-align: center;
}

/* element样式修改 */
.choose>>>.el-select {
    display: block;
}

.dateChoose>>>.el-date-editor {
    display: block;
    width: 100%;
}
.dateChoose>>>.el-input__prefix{
    top: 17px;
}
.choose>>>.el-select .el-input__suffix {
    top: 15px;
} 
</style>